<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 用户信息卡片 -->
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>
          <div class="text-center">
            <el-avatar :size="100" :src="user.avatar" />
            <div class="mt-3">
              <h2>{{ user.nickname || user.username }}</h2>
            </div>
            <div class="user-info">
              <ul class="list-group list-group-striped">
                <li>
                  <label>用户名称</label>
                  <div>{{ user.username }}</div>
                </li>
                <li>
                  <label>所属部门</label>
                  <div>{{ user.deptName || '未分配部门' }}</div>
                </li>
                <li>
                  <label>角色</label>
                  <div>{{ user.roles.join(', ') || '无角色' }}</div>
                </li>
                <li>
                  <label>创建时间</label>
                  <div>{{ formatDateTime(user.createdAt) }}</div>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 用户信息标签页 -->
      <el-col :span="18" :xs="24">
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="basic">
              <user-info :user="user" @success="getUser" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="password">
              <password-form @success="handlePasswordSuccess" />
            </el-tab-pane>
            <el-tab-pane label="修改头像" name="avatar">
              <avatar-upload @success="getUser" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getUserInfo } from '@/api/user'
import UserInfo from './components/UserInfo.vue'
import PasswordForm from './components/PasswordForm.vue'
import AvatarUpload from './components/AvatarUpload.vue'

// 激活的标签页
const activeTab = ref('basic')

// 用户信息
const user = reactive({
  id: null,
  username: '',
  nickname: '',
  deptId: null,
  deptName: '',
  avatar: '',
  roles: [],
  phone: '',
  email: '',
  status: 1,
  createdAt: ''
})

// 格式化日期时间
const formatDateTime = (value) => {
  if (!value) return ''
  return new Date(value).toLocaleString()
}

// 获取用户信息
const getUser = async () => {
  try {
    const res = await getUserInfo()
    Object.assign(user, res.data)
    user.roles = (res.data.roles || []).map(role => role.name)
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  }
}

// 密码修改成功
const handlePasswordSuccess = () => {
  activeTab.value = 'basic'
  ElMessage.success('密码修改成功')
}

onMounted(() => {
  getUser()
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.text-center {
  text-align: center;
}

.mt-3 {
  margin-top: 15px;
}

.card-header {
  font-weight: bold;
}

.user-info {
  padding: 15px 0;
  
  .list-group-striped {
    padding: 0;
    margin: 0;
    
    li {
      padding: 15px 0;
      margin: 0;
      border-bottom: 1px solid #f0f0f0;
      list-style: none;
      display: flex;
      
      &:last-child {
        border-bottom: none;
      }
      
      label {
        flex: 1;
        color: #999;
        font-weight: normal;
      }
      
      div {
        flex: 3;
        text-align: left;
        color: #666;
      }
    }
  }
}
</style> 